<template>
  <list-layout
    channel="stddev"
    :categories="categories"
    @changed="categoryChanged"
    >
    <template slot="bottom-of-categories">
      <div class="col q-mt-md cursor-pointer">
        <q-img
          src="images/portal/标准库.png"
          @click="$router.push('/standard')">
          <div class="full-height full-width text-center
            bg-transparent column justify-center text-bold">
            <div style="font-size: 1.2rem;">{{$t('标准查询')}}</div>
            <div style="font-size: 0.875rem"
              v-if="$i18n.locale !== 'en-us'">STANDARDS</div>
          </div>
        </q-img>
      </div>
    </template>
    <div class="list-top-text">
      {{$t((currentCategory && currentCategory.类型) || '全部标准')}}
      <filter-options ref="filterOptions" class="filter-options"
        :hasKw="true"
        :bottomKw="true"
        :showSelected="false"
        :maxLines="3"
        @search="filter({query: $event})"></filter-options>
    </div>
    <list-item
      v-for="(item,index) in data.docs" :key="index"
      :tags="[item.发布日 ? new Date(item.发布日).getFullYear() : undefined,
        item.类型, item.领域, item.状态, item.StatusLabel]"
      :date="item.CreatedDate"
      :title="item.标题"
      :content="item.英文名 || item.范围 || item.标题"
      :img="item.图片 && item.图片.id"
      :url="`/stddev/${item.id}`">
      <template slot="after">
        <div class="list-item-after column items-center justify-center q-px-sm">
          <div class="list-item-after-title"
            :class="{ongoing: item.Status === '0', done: item.Status !== '0' }">
              {{ item.StatusLabel }}
          </div>
          <div class="list-item-after-subtitle"
            v-if="item.afterSubLabel">{{ item.afterSubLabel }}</div>
        </div>
      </template>
    </list-item>

    <div
      v-if="data && data.total === 0"
      class="no-data-label">
      <div class="absolute-center">
        {{$t('暂无数据')}}
      </div>
    </div>

    <!-- 列表页面注意分页 -->
    <!-- 翻页时调用: refreshData({page: <页吗>}) -->
    <pagination v-if="data && data.total" :data="data" @changed="pageChanged"></pagination>
  </list-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnLocaleChange } from '@/modules/portal/components/mixins/locale';
import listLayout from '@/modules/portal/components/listLayout';
import listItem from '@/modules/portal/components/listItem';
import pagination from '@/modules/portal/components/pagination';
import FilterOptions from '@/modules/portal/components/filterOptions';

export default {
  name: 'StandardDevelopmentList',
  mixins: [mixins.ObjectDataMixin, RefreshOnLocaleChange],
  components: {
    listItem,
    listLayout,
    pagination,
    FilterOptions,
  },
  data() {
    return {
      filters: {},
      categories: [
        {
          text: '全部',
          filter: {},
        },
        {
          text: '团体标准',
          filter: {
            类型: '团体标准',
          },
        },
      ],
      currentCategory: '',
    };
  },
  created() {
    if (this.Bus && this.Bus.$store && this.Bus.$store.state
      && this.Bus.$store.state.portal && this.Bus.$store.state.portal.filters
      && this.Bus.$store.state.portal.filters.standard) {
      this.currentCategory = this.Bus.$store.state.portal.filters.standard.filter || {};

      this.refreshData({ ...this.currentCategory });
    } else {
      this.refreshData();
    }
  },
  methods: {
    afterRefresh() {
      this.Bus.$store.commit('portal/CLEAR_FILTERS');

      this.data.docs.forEach((doc) => {
        // set StatusLabel according to the current step and the status
        if (doc.CurrentStep) {
          const currentStep = doc.CurrentStep;
          const currentStatus = doc.Status;

          if (currentStep === 1) {
            if (currentStatus === '0') {
              doc.StatusLabel = '提议中';
            } else if (currentStatus === '1') {
              doc.StatusLabel = '提议已提交';
            } else if (currentStatus === '-1') {
              doc.StatusLabel = '已驳回';
            }
          } else if (currentStep === 2) {
            if (currentStatus === '0') {
              doc.StatusLabel = '立项中';
            } else if (currentStatus === '1') {
              doc.StatusLabel = '已立项';
            } else if (currentStatus === '-1') {
              doc.StatusLabel = '已驳回';
            }
          } else if (currentStep === 3) {
            if (currentStatus === '0') {
              doc.StatusLabel = '意见征集中';
            } else if (currentStatus === '1') {
              doc.StatusLabel = '草稿已提交';
            } else if (currentStatus === '-1') {
              doc.StatusLabel = '已驳回';
            }

            doc.afterSubLabel = `收到意见${doc.comments || 0}条`;
          } else if (currentStep === 4) {
            if (currentStatus === '0') {
              doc.StatusLabel = '审核中';
            } else if (currentStatus === '1') {
              doc.StatusLabel = '已发布';
            } else if (currentStatus === '-1') {
              doc.StatusLabel = '已驳回';
            }
          }
        }
      });
    },
    categoryChanged(f) {
      this.currentCategory = f;

      this.refreshData(f);

      this.filters = {};
      this.$refs.filterOptions.clearFilters();
    },
    pageChanged(p) {
      let filter = {};

      if (this.currentCategory) {
        filter = { ...this.currentCategory };
      }

      this.refreshData({ ...this.filters, ...filter, page: p });
    },
    filter(filters) {
      const { query } = filters;

      this.filters = query || {};
      let filter = {};

      if (this.currentCategory) {
        filter = { ...this.currentCategory };
      }

      this.refreshData({ ...this.filters, ...filter });
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-options {
  font-size: 14px;
}

.list-item-after {
  font-size: 14px;
  font-weight: 500;
  &-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 2em;
    letter-spacing: 0.5px;

    &.ongoing {
      color: green;
    }

    &.done {
      color: $negative;
    }
  }
  &-subtitle {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
  }
}
</style>
